<template>
  <div class="pic-clearfix">
    <a-upload class="upload-container"
              :action=actionUrl
              name="files"
              list-type="picture-card"
              :file-list="fileList"
              @preview="handlePreview"
              @change="handleChange"
    >
      <div v-if="fileList.length < 5" class="single-container">
        <a-icon type="plus" />
        <div class="ant-upload-text">图 片</div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
  import ip from '@/api/global_variable'
  import api from '@/server/userConfig';
  import imgDownUrl from '../../../api/global_variable';
  function getBase64 (file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
    });
  }
  export default {
    name: 'UploadImage',
    components: {},
    data () {
      return {
        previewVisible: false,
        previewImage: '',
        fileList: [],
      };
    },
    computed: {
      actionUrl: function () {
        return `${ip.localIp}/uploadResolveRecordPicture.action`;
      }
    },
    methods: {
      handleCancel () {
        this.previewVisible = false;
      },
      async handlePreview (file) {
        console.log(file);
        if (!file.url && !file.preview) {
          file.preview = await getBase64(file.originFileObj);
        }
        this.previewImage = file.url || file.preview;
        this.previewVisible = true;
      },
      handleChange ({file, fileList}) {
        if (file.status === 'uploading') {
          this.fileList = fileList;
        }
        else if (file.status === 'done') {
          this.fileList = fileList;
          file = fileList[fileList.length - 1];
          // 取出响应数据中的图片文件名和url
          const { id, url } = file.response.Data[0];
          // 保存到上传的file对象
          file.id = id;
          file.url = ip.imgDownUrl + url;
          //console.log(file);
          //console.log(fileList);
          this.$emit('changeFileList', fileList);
        }else if (file.status === 'removed') { // 删除
          this.$Modal.confirm({
            title: '确定删除此图片吗?',
            content: '',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk: () => {
              this.fileList = fileList;
              console.log(fileList);
              this.$emit('changeFileList', fileList);
            },
            onCancel () {}
          });
        }
      }
    }
  }
</script>

<style>
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }
  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
  .pic-clearfix >>> .ant-upload-select-picture-card {
    float: left;
  }
  .pic-clearfix {
    float: left;
    width: 100%;
  }
  .pic-clearfix >>> .ant-upload-picture-card-wrapper {
    display: flex;
  }
</style>
